<template>
  <!--,initialValue:''  新增-->
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="600px" ok-text="确认" cancel-text="取消"
    @ok="addFormSubmit">
    <a-form layout="vertical" :form="events_form">
      <a-form-item label="员工姓名">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入员工姓名' }] }]" />
      </a-form-item>
      <a-form-item label="员工性别">
        <a-select v-decorator="['sex',{rules: [{ required: true, message: '请选择员工性别!' }]}]">
          <a-select-option v-for="item in sexData" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="登录账号" v-if="vifyState">
        <a-input v-decorator="['loginAccount', { rules: [{ required: vifyState, message: '请输入登录账号' }],initialValues: '' }]" />
      </a-form-item>
      <a-form-item label="登录密码" v-if="vifyState">
        <a-input autocomplete="new-password" type="password" v-decorator="['password', { rules: [{ required: vifyState, message: '请输入登录密码' }],initialValues: '' }]" />
      </a-form-item>
      <a-form-item label="所属部门">
        <a-tree-select style="width:100%" treeNodeFilterProp="title" multiple :tree-data="orgData"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto'}" :replace-fields="orgFields" show-search v-decorator="['orgIds',{ rules: [{ required: true, message: '请选择所属部门' }] }]" placeholder="请选择所属部门">
        </a-tree-select>
      </a-form-item>
      <a-form-item label="账号类型">
        <a-select @change="(e)=>{return accountTypeChange(e,'')}"
          v-decorator="['accountType',{rules: [{ required: true, message: '请选择账号类型!' }]}]">
          <a-select-option v-for="role in accountTypeData" :key="role.value">
            {{ role.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属角色">
        <a-select @focus="roleChange()" v-decorator="['roleId',{rules: [{ required: true, message: '请选择角色!' }]}]">
          <a-select-option v-for="role in roleData" :key="role.roleId">
            {{ role.roleName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="手机号码">
        <a-input :maxLength="11" v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号码!' },{
pattern:/^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/,message: '手机格式错误'}],initialValue: ''}]" />
      </a-form-item>

    </a-form>

  </a-modal>
</template>

<script>
  import md5 from 'md5'
  import store from '@/store'
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  import {
    addStaff,
    editStaff
  } from "@/api/human/staff"
  import {
    SEX_DATA
  } from "@/config/baseData"
  export default {
    name: 'AddStaff',
    data() {
      return {
        sexData: SEX_DATA,
        roleData: [],
        accountType: "",
        visible: false,
        title: '',
        id: '',
        submitLoading: false
      }
    },
    beforeCreate() {
      this.events_form = this.$form.createForm(this, {
        name: 'events_form'
      });
    },
    computed: {
      ...mapGetters(['userInfo', 'orgFields', 'accountTypeData', 'orgData']),
      vifyState() {
        var flag = true;
        if (this.id) {
          flag = false;
        }
        return flag;
      }
    },
    methods: {
      ...mapActions({
        getAllDepartmentRole: 'department/getAllDepartmentRole'
      }),
      async add(rows) {
        this.title = rows === true ? '新增员工' : '编辑员工';
        this.id = rows === true ? '' : rows.id;
        this.roleData = [];
        this.accountType = "";
        if (rows === true) {
          this.$nextTick(() => {
            this.events_form.resetFields();
          })
          this.visible = true;
        } else {
          this.id = rows.id;
          this.$nextTick(() => {
            let values = this.events_form.getFieldsValue();
            for (var key in rows) {
              if (key == "orgIds") {
                values[key] = rows[key].split(',')
              } else {
                values[key] = rows[key]
              }
            }
            // this.accountTypeChange(rows.accountType, rows.roleId);
            this.accountType = rows.accountType
            this.roleData.push({
              roleName: rows.roleName,
              roleId: rows.roleId
            })
            values.sex = rows.sex == '女' ? 2 : 1;
            this.events_form.setFieldsValue(values);
          });
          this.visible = true;
        }
      },
      async accountTypeChange(keys, val) {
        // this.events_form.setFieldsValue({
        //   roleId: val
        // });
        // this.roleData = await store.dispatch('department/getAllDepartmentRole', keys);
      },
      async roleChange() {
        this.roleData = await store.dispatch('department/getAllDepartmentRole', '1A52UPA32YJUJHW7MWEPACSODDIZXR');
      },
      addFormSubmit() {
        const that = this;
        this.events_form.validateFieldsAndScroll(async (err, values) => {
          if (!err) {
            if (this.id) {
              values.id = this.id;
            }
            if (!this.id) {
              values.password = md5(values.password);
            }
            values.roleName = this.roleData.find(v => v.roleId == values.roleId).roleName;
            values.sex = values.sex == 1 ? '男' : '女';
            that.submitLoading = true;
            const {
              code
            } = that.id ? await editStaff(values) : await addStaff(values);
            that.submitLoading = false;
            if (code === '1') {
              that.visible = false;
              let state = that.id ? false : true;
              that.$emit('on-ok', state)
            }
          }
        });
      }
    }
  }
</script>
